<template>
  <div>
    <page-main>
      <div id="mapContainer"></div>
      <el-table :data="tableData" height="20vh" border size="small">

        <el-table-column label="设备名称" prop="device_name"></el-table-column>
        <el-table-column label="设备类型" prop="mold_name"></el-table-column>
        <el-table-column label="安装位置" prop="address"></el-table-column>
        <el-table-column
          label="更新时间"
          prop="update_time"
          :formatter="getDateTime"
        ></el-table-column>
        <el-table-column
          label="状态"
          prop="status"
          :formatter="deviceStatus"
          width="50"
        ></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="tableDataInfo.page"
          :page-count="tableDataInfo.total_page"
          :total="tableDataInfo.total"
          layout="total,prev, pager, next, jumper"
          :hide-on-single-page="false"
          background
        >
        </el-pagination>
      </div>
    </page-main>
  </div>
</template>

<script>
import { resolve } from "path-browserify";
export default {
  data() {
    return {
        tableData: [], //一次请求三条
        tableDataInfo: "",
        buildingList: [],
        buildingInfoWindow: "",
        buildingMap: "",
        build_id: "",
        defaultProps: {
            children: "sub_item",
            label: "name",
            value: 'id',
            checkStrictly: true
        },
    };
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
      // 搜索
    getDateTime(row, column, cellValue, index) {
      return this.$getDateTime(cellValue);
    },
    deviceStatus(row, column, cellValue, index) {
      let temp = ["", "正常", "预警", "故障", "停用", "报警"];
      return temp[cellValue];
    },
    async init() {
      await this.getData();
      await this.getPoint();
    },
    getData() {
      return new Promise((resolve) => {
        this.$api
          .post("/unit/DeviceInstall/buildList", { rows: 100})
          .then((res) => {
            this.buildingList = res.data.list;
            resolve();
          });
      });
    },
    getPoint() {
      let that = this;
      return new Promise((resolve) => {
        this.buildingInfoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -30),
        });
        let map = new AMap.Map("mapContainer", { resizeEnable: true });
        this.buildingMap = map;
        let buildingList = this.buildingList;
        buildingList.map((curVal) => {
          let marker = new AMap.Marker({
            position: [curVal.longitude, curVal.latitude],
            map: map,
          });
          marker.build_id = curVal.build_id;
          marker.content = `<div>建筑名称：${curVal.architecture_name}</div><div>单位名称：${curVal.unit_full_name}</div><div>单位联系人：${curVal.contact_name}</div><div>联系电话：${curVal.phone}</div>`;
          marker.on("mouseover", that.infoOpen);
          marker.on("mouseout", that.infoClose);
          marker.on("click", that.markerClickEvent);
        });
        map.setFitView();
        resolve();
      });
    },
    infoOpen(e) {
      this.buildingInfoWindow.setContent(e.target.content);
      this.buildingInfoWindow.open(this.buildingMap, e.target.getPosition());
    },
    infoClose(e) {
      this.buildingInfoWindow.close(this.buildingMap, e.target.getPosition());
    },
    markerClickEvent(e) {
      this.build_id = e.target.build_id;
      this.getDeviceLists();
    },
    handleCurrentChange(e) {
      this.getDeviceLists(e);
    },
    getDeviceLists(page) {
      let pageNum = 1;
      if (page) {
        pageNum = page;
      }
      let params = {
        page: pageNum,
        rows: 6,
        building_id: this.build_id,
      };
      this.$api.post("/unit/DeviceInstall/Lists", params).then((res) => {
        this.tableData = res.data.list;
        this.tableDataInfo = res.data;
      });
    },
  },
};
</script>

<style>
.block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
#mapContainer {
    width: 100%;
    height: 54vh;
}
.amap-icon img {
    width: 25px;
    height: 34px;
}
</style>
